<template>
  <div class="rank" v-if="list.length > 0">
    <van-tabs 
    v-model="active"
    :swipeable="true"
    :animated="true"
    line-width="30px">
      <van-tab
        v-for="item,index in bannerList"
        :key="index"
        :title="item.categoryName"
        :name="item.categoryId"
      >
        <rank-comment
        :categoryName="item.categoryName"
        :categoryId="item.categoryId"
        ></rank-comment>
      </van-tab>
    </van-tabs>

   
  </div>
</template>

<script>
import { initSearchBannerData } from "@/request/api.js";
import { initSearchBannerListData } from "@/request/api.js";
import  RankComment from "@/views/search/searchcomp/RankComment.vue"

export default {
  name: "SearchRank",
  data() {
    return {
      bannerList: [],
      categoryId: 0,
      size: 24,
      list: [],
      
      active:""
    };
  },
  created() {
    this.initData();
  },
  components:{
    RankComment
  },
 
    methods: {
    async initData() {
      let { data: res } = await initSearchBannerData();
      console.log(res);
      this.bannerList = res.category;
      this.categoryId = res.category[0].categoryId;

      let { data: req } = await initSearchBannerListData(
        this.categoryId,
        this.size
      );

      this.list = req.hotWordResultList;
    },

    async tabList(name) {
      if (this.categoryId == name) {
        return;
      } else {
        this.isLoading = localStorage.getItem("isLoading");

        this.categoryId = name;
        let { data: req } = await initSearchBannerListData(
          this.categoryId,
          this.size
        );

        this.list = req.hotWordResultList;

        let his = [];

        this.isLoading = false;
        console.log("列表" + name, req);
      }
    },

    getHis(word) {
      let arr = JSON.parse(localStorage.getItem("his"));

      if (arr) {
        arr.forEach((item, i) => {
          if (item == word) {
            arr.splice(i, 1);
          }
        });
      } else {
        arr = [];
      }

      arr.unshift(word);
      localStorage.setItem("his", JSON.stringify(arr));
    },
  },
};
</script>

<style lang="scss" scoped>
.rank {
  .com {
    ul {
      position: relative;
      padding-left: 33px;
      li {
        border-bottom: 1px solid #f3f4f5;
        a {
          display: block;
          .item {
            padding-right: 15px;
            height: 44px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .l_b {
              display: flex;
              align-items: center;
              .num {
                width: 20px;
                font-weight: 500;
                font-size: 16px;
                color: #dabda6;
                text-align: center;
              }
              .num.one {
                font-size: 20px;
                color: #ff0b0b;
              }
              .num.two {
                font-size: 20px;
                color: #f86442;
              }
              .num.three {
                font-size: 20px;
    color: #f8a642
              }
              .info {
                height: 44px;
                line-height: 44px;
                font-size: 16px;
                font-weight: 500;
                color: #333;
                padding-left: 15px;
                width: 290px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
            .r_b {
              font-size: 12px;
            }
            .r_b.up {
              color: #e44a3b;
            }
            .r_b.down {
              color: #93cc48;
            }
            .r_b.line {
              color: #dededf;
            }

            .r_b{
              i{
                font-size: 17px;
                font-weight: 700;
              }
            }
          }
        }
      }

      .com_item:nth-last-child(-n + 5) {
        filter: blur(5px);
      }

      .mask_open {
        padding-top: 50px;
        position: absolute;
        left: 0;
        bottom: 0;
        height: (4 * 44px);
        background-color: rgba(0, 0, 0, 0.7);
        width: 100%;

        a {
          display: block;
          p {
            font-size: 14px;
            color: #fff;
            text-align: center;
            padding-bottom: 20px;
          }
        }
      }
    }

    .load {
      margin-top: 150px;
      text-align: center;
    }
  }
}

/deep/.van-tab {
  color: #a3a3ac;
  border-bottom: 1px solid #e8e8e8;
}
/deep/.van-tab.van-tab--active {
  font-size: 18px;
  color: #40404c;
}
.tablist {
  padding: 0 8px;
}
</style>
